<template>
    <box
        width="763px"
        height="680px"
        left="1099px"
        top="291px"
        title="责任位差评分析"
    >
        <my-marquee :info="info.info" :width="734"></my-marquee>
        <my-title top="90px" title="差评责任位分布图"></my-title>
        <my-title
            top="90px"
            left="403px"
            title="责任位超期未闭环分析"
        ></my-title>
        <div class="chart-content flex">
            <div class="chart chart-1" ref="chart-1"></div>
            <div class="chart chart-2" ref="chart-2"></div>
        </div>

        <div class="table">
            <table cellpadding="0" cellspacing="0">
                <thead>
                    <tr class="blue">
                        <td rowspan="2">责任位</td>
                        <td colspan="2">日</td>
                        <td colspan="4">月累计</td>
                    </tr>
                    <tr>
                        <td>差评量</td>
                        <td>占比</td>
                        <td>差评量</td>
                        <td>差评率</td>
                        <td>占比</td>
                        <td>同比</td>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="(item, index) in info.tableList"
                        :key="`item-${index}`"
                    >
                        <td>
                            {{ item.name }}
                        </td>
                        <td>
                            {{ item.dayBad }}
                        </td>
                        <td>
                            {{ item.dayPercent }}
                        </td>
                        <td>
                            {{ item.monthBad }}
                        </td>
                        <td>
                            {{ item.monthBadPercent }}
                        </td>
                        <td>
                            {{ item.percent }}
                        </td>
                        <td>
                            <div class="flex space-center">
                                <span
                                    :class="
                                        item.percent2 > 0
                                            ? 'redcolor'
                                            : 'greencolor'
                                    "
                                    >{{ item.percent2 | percent }}</span
                                >
                                <img
                                    :src="item.percent2 > 0 ? upIcon : downIcon"
                                    alt=""
                                    style="margin-left: 2px"
                                />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <p class="tip">* 天猫数据</p>
    </box>
</template>

<script>
export default {
    props: {
        info: {},
    },
    components: {},
    data() {
        return {
            upIcon: require("@/assets/img/comment/up.png"),
            downIcon: require("@/assets/img/comment/down.png"),
        };
    },
    filters: {
        percent(val) {
            return `${val.toFixed(0)}%`;
        },
    },
    watch: {
        info: {
            handler(newVal) {
                this.$nextTick(() => {
                    this.chartInit1(newVal.badChartData);
                    this.chartInit2(newVal.overChartData);
                });
            },
            deep: true,
        },
    },
    methods: {
        chartInit1(data) {
            let _chart = this.$echarts.init(this.$refs["chart-1"]);
            let _option = {
                color: [
                    "#912ce1",
                    "#6448f3",
                    "#3142f8",
                    "#007cf9",
                    "#00ace6",
                    "#00ccbb",
                ],
                tooltip: {
                    trigger: "item",
                    formatter: "{b}:{d}%",
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["20%", "60%"],
                        center: ["50%", "52%"],
                        roseType: "radius",
                        label: {
                            formatter: "{b} {d}%",
                            fontSize: 14,
                            color: "#8fadcc",
                        },
                        labelLine: {
                            length: 10,
                            length2: 20,
                        },
                        data: data,
                    },
                ],
            };
            _chart.setOption(_option);
        },
        chartInit2(data) {
            let _chart = this.$echarts.init(this.$refs["chart-2"]);
            let _option = {
                color: [
                    "#912ce1",
                    "#6448f3",
                    "#3142f8",
                    "#007cf9",
                    "#00ace6",
                    "#00ccbb",
                ],
                tooltip: {
                    trigger: "item",
                    formatter: "{b}：{d}%",
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["50%", "65%"],
                        center: ["50%", "52%"],

                        label: {
                            formatter: "{b} {c}单",
                            fontSize: 14,
                            color: "#8fadcc",
                        },
                        labelLine: {
                            length: 10,
                            length2: 20,
                        },
                        data: data,
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(0, 16, 64, 0.3)",
                                borderWidth: 3,
                            },
                        },
                    },
                ],
            };
            _chart.setOption(_option);
        },
    },
    created() {},
    mounted() {},
};
</script>
<style lang='less' scoped>
.chart-content {
    position: absolute;
    width: 763px;
    height: 220px;
    top: 89px;
    left: 0;
    .chart {
        width: 50%;
        height: 220px;
        &.chart-1 {
            background-image: url(../../../assets/img/comment/right-bottom-icon-1.png);
        }
        &.chart-2 {
            background-image: url(../../../assets/img/comment/right-bottom-icon-2.png);
        }
    }
}
.table {
    width: 706px;
    height: 290px;
    position: absolute;
    overflow-y: scroll;
    left: 26px;
    bottom: 50px;
    table {
        width: 706px;
        height: 271px;
        font-size: 12px;
        thead {
            background: rgba(8, 30, 121, 0.4);
            text-align: center;
            color: #8fadcc;
            .blue {
                td {
                    color: #33bbff;
                    font-size: 14px;
                }
            }
            td {
                padding: 10px 14px;
                border: 1px solid #164099;
            }
        }
        tbody {
            text-align: center;
            background: rgba(3, 10, 26, 0.4);

            td {
                padding: 10px 0;
                border: 1px solid #091e4e;
            }
        }
    }
}
.tip {
    color: #8fadcc;
    font-size: 14px;
    position: absolute;
    right: 35px;
    bottom: 16px;
}
.redcolor {
    color: #dd4e58;
}
.greencolor {
    color: #01c39f;
}
</style>